<template>
  <div class="account-balance">
    <top v-if="Object.keys(account).length > 0">
      <li>
        <span class="text">可用名额:</span>
        <!--<span class="num">{{ +account.quota4 }} / {{ +account.quota3 }} / {{ +account.quota2 }} / {{ +account.quota }} 个</span>-->
        <span class="num">{{ +account.quota4 + +account.quota3 + +account.quota2 + +account.quota }} 个</span>
      </li>
    </top>
    <div class="quota">
      <div class="text">指定会员等级,请认真操作</div>
      <div class="line">用户ID:</div>
      <cube-input v-model="id"></cube-input>
      <div class="line">请选择身份等级:</div>
      <cube-select
        v-model="level"
        :title="'请选择身份'"
        :options="options"
        @change="change">
      </cube-select>
      <div class="btn">
        <cube-button primary :disabled="loading" @click="save">确定</cube-button>
      </div>
    </div>
  </div>
</template>

<script>
import Top from '../components/Top'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'AccountBalance',
  components: {
    Top,
  },
  filters: {
  },
  data() {
    return {
      loading: false,
      account: {},
      options: [],
      list: [],
      level: 0,
      id: '',
      value: 0
    }
  },
  methods: {
    getLevel() {
      api.User.quotaLevel().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.list = data.list
        this.options = this.list.map(x => x.display)
        console.log(data)
      })
    },
    getAccount() {
      this.loading = true
      api.Account.myAccount().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.account = data.account
        this.my = data.my
        this.team = data.team
        this.count = data.count
      }).finally(() => {
        this.loading = false
      })
    },
    change(v) {
      console.log(v)
      const x = this.list.filter(x => x.display === v)
      this.value = x[0].value
      console.log(this.value)
    },
    save() {
      if (!this.id) {
        return this.$createDialog({
          type: 'alert',
          title: '请输入用户ID',
          timeout: 500
        }).show()
      }
      if (!this.value) {
        return this.$createDialog({
          type: 'alert',
          title: '请选择等级',
          timeout: 500
        }).show()
      }
      this.loading = true
      api.User.saveLevel({ id: this.id, value: this.value }).then(() => {
        this.$createDialog({
          type: 'alert',
          title: '操作成功',
          onConfirm: () => this.$router.push('/center'),
          timeout: 500
        }).show()
      }).finally(() => {
        this.loading = false
      })
    }
  },
  created () {
    this.getAccount()
    this.getLevel()
  },
  deactivated () {
  }
}
</script>

<style scoped lang="stylus">
.quota
  padding 20px
  text-align left
  .text
    text-align center
    color red
    font-size 16px
  .line
    height 30px
    line-height 30px
    margin-top 10px
    font-size 14px
  .btn
    padding-top 20px
.account-balance
  .commission
    margin-bottom 15px
    .item
      margin 10px
      padding 10px
      background white
      border-radius 10px
      min-height 100px
      display flex
      .award
        width 100px
        height 100px
        line-height 100px
        color red
        font-weight 700
        font-size 16px
        letter-spacing 1px
      .desc
        flex 1
        text-align left
        display flex
        flex-direction column
        justify-content center
        p
          height 20px
          span
            margin 0 5px
          &.score
            color red
            font-size 14px
            font-weight 700
  .consume
    margin-bottom 15px
    .item
      margin 10px
      padding 10px
      background white
      border-radius 10px
      min-height 100px
      display flex
      flex-direction column
      align-items start
      justify-content center
      p
        height 20px
        line-height 20px
        span
          margin 0 5px

.note
  padding 10px
  background white
  margin 5px 0
  p
    height 25px
    line-height 25px
    padding-left 10px
    text-align left
    font-size 16px
    letter-spacing 2px
    span
      color red
      &.done
        margin-left 10px
</style>
